/**
 * Created by xiangjiayu on 2017/6/26.
 * 新增订单
 */

import React from 'react';
import {Table, Icon,Button,Tooltip,Row,Col,Input,Select,DatePicker,Cascader,Radio,Dropdown,Checkbox,Modal,Form,Popconfirm,Upload} from 'antd';
import MyIcon from '../../components/common/MyIcon/MyIcon'; //自定义字体图标
import AddressSelect from '../../components/common/AddressSelect/AddressSelect';//省市级联
import CheckBox from '../../components/common/CheckBox/CheckBox';//自定义 多选框


const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const FormItem = Form.Item;
const { MonthPicker, RangePicker } = DatePicker;//日历

const formItemLayout = {
    labelCol: {
        sm: { span: 3 },
    },
    wrapperCol: {
        sm: { span: 5 },
    },
};


export default class CuserAdd  extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            isShowCuser:false,//客户其他信息展开状态
            //上传图片
            previewVisible: false,
            previewImage: '',
            fileList: [{
                uid: -1,
                name: 'xxx.png',
                status: 'done',
                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            }],
            
        };
    }
    //客户其他信息展开状态
    CuserContSlide = (e) => {
        this.setState({
            'isShowCuser': !this.state.isShowCuser,
        })
    }
    // 上传图片
    handleCancel = () => this.setState({ previewVisible: false })
    handlePreview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    }

    handleChange = ({ fileList }) => this.setState({ fileList })
    render(){
        //客户其他信息
        let data_children =[{
            text: '无',
            state:true,
            type:'radio'
        },{
            text: '有',
            state:'',
            type:'radio'
        }];
        let data_oldpeople =[{
            text: '无',
            state:true,
            type:'radio'
        },{
            text: '有',
            state:'',
            type:'radio'
        }];
        let data_food =[{
            text: '偏甜',
            state:true,
        },{
            text: '偏辣',
            state:'',
        },{
            text: '偏咸',
            state:'',
        },{
            text: '清淡',
            state:'',
        }];
        let data_pet =[{
            text: '无',
            state:true,
        },{
            text: '猫',
            state:'',
        },{
            text: '小型犬',
            state:'',
        },{
            text: '大型犬',
            state:'',
        }];
        const { previewVisible, previewImage, fileList } = this.state;
        const uploadButton = (
            <div>
                <Icon type="upload" />
                <div className="ant-upload-text">上传</div>
            </div>
        );
        return(
            <div className="order-add">
                    <div className="slip-title">
                        <div className="slip-base">
                            <div className="slip-left">
                                <h4>新增客户</h4>
                            </div>
                        </div>
                    </div>
                    <div className="slip-body">
                        {/*请填写客户信息*/}
                        <div className="slip-cont">
                            <div className="slip-cont-title">
                                <span className="span-bdw">请填写客户信息</span>
                            </div>
                            <div className="slip-cont-b">
                                <div className="add-cont">
                                    <Row gutter={16}>
                                        <Col span={3} className="text-r">
                                            <div className="ant-form-item-label">
                                                <label className="ant-form-item-required"><span className="span-left">联系电话</span></label>
                                            </div>
                                        </Col>
                                        <Col span={5}>
                                            <div className="ant-form-item-control has-error">
                                                <Input size="large" placeholder="请输入联系电话"/>
                                            </div>
                                        </Col>
                                        <Col span={5}>
                                            <div className="error-tip"><Icon type="minus-circle-o" />请输入联系电话</div>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={3} className="text-r">
                                            <div className="ant-form-item-label">
                                                <label><span className="span-left">客户姓名</span></label>
                                            </div>
                                        </Col>
                                        <Col span={5}>
                                            <div className="ant-form-item-control">
                                                <Input size="large" placeholder="请输入客户姓名"/>
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={3} className="text-r">
                                            <div className="ant-form-item-label">
                                                <label><span className="span-left">客户头像</span></label>
                                            </div>
                                        </Col>
                                        <Col span={21}>
                                            <div className="ant-form-item-control">
                                                <div className="clearfix">
                                                    <Upload
                                                        action=""
                                                        listType="picture-card"
                                                        fileList={fileList}
                                                        onPreview={this.handlePreview}
                                                        onChange={this.handleChange}
                                                    >
                                                        {fileList.length >= 1 ? null : uploadButton}
                                                    </Upload>
                                                    <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                                                        <img alt="example" style={{ width: '100%' }} src={previewImage} />
                                                    </Modal>
                                                </div>
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={3} className="text-r">
                                            <div className="ant-form-item-label">
                                                <label><span className="span-left">服务地址</span></label>
                                            </div>
                                        </Col>
                                        <Col span={5}>
                                            <AddressSelect/>
                                        </Col>
                                        <Col span={5}>
                                            <Input placeholder="详细街道地址" size="large" suffix={<Icon type="environment" />} />
                                        </Col>
                                        <Col span={5}>
                                            <Input placeholder="详细地址，如楼层/门牌号" size="large" />
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                        </div>
                        {/*请填写客户其他详细信息*/}
                        <div className="slip-cont">
                            <div className="slip-cont-title">
                                <span className="span-bdw">请填写客户其他详细信息</span>
                                <div className="slip-bdt">
                                    <Button type="primary" onClick={this.CuserContSlide}>{this.state.isShowCuser ? '收起' : '展开'}</Button>
                                </div>
                            </div>
                            <div className={this.state.isShowCuser ? 'slip-cont-b' : 'slip-cont-b dis-n'}>
                                <div className="add-cont">
                                    <Row gutter={16}>
                                        <Col span={3} className="text-r">
                                            <div className="ant-form-item-label">
                                                <label><span className="span-left">籍贯</span></label>
                                            </div>
                                        </Col>
                                        <Col span={5}>
                                            <div className="ant-form-item-control">
                                                <AddressSelect/>
                                            </div>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={3} className="text-r">
                                            <div className="ant-form-item-label">
                                                <label><span className="span-left">家庭成员</span></label>
                                            </div>
                                        </Col>
                                        <Col span={5}>
                                            <div className="ant-form-item-control">
                                                <Input size="large" placeholder="请输入家庭成员"/>
                                            </div>
                                        </Col>
                                        <Col span={2}><span className="danwei">口/人</span></Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={3} className="text-r">
                                            <div className="ant-form-item-label">
                                                <label><span className="span-left">小孩情况</span></label>
                                            </div>
                                        </Col>
                                        <Col className="ant-col-auto">
                                            <CheckBox data={data_children}></CheckBox>
                                        </Col>
                                        <Col span={5}>
                                            <Input size="large" placeholder="请输入小孩情况"/>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={3} className="text-r">
                                            <div className="ant-form-item-label">
                                                <label><span className="span-left">老人情况</span></label>
                                            </div>
                                        </Col>
                                        <Col className="ant-col-auto">
                                            <CheckBox data={data_oldpeople}></CheckBox>
                                        </Col>
                                        <Col span={5}>
                                            <Input size="large" placeholder="请输入老人情况"/>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={3} className="text-r">
                                            <div className="ant-form-item-label">
                                                <label><span className="span-left">房屋面积</span></label>
                                            </div>
                                        </Col>
                                        <Col span={5}>
                                            <Input size="large" placeholder="请输入房屋面积"/>
                                        </Col>
                                        <Col span={2}>
                                            <span className="danwei">平米</span>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={3} className="text-r">
                                            <div className="ant-form-item-label">
                                                <label><span className="span-left">饮食偏好</span></label>
                                            </div>
                                        </Col>
                                        <Col className="ant-col-auto">
                                            <CheckBox data={data_food}></CheckBox>
                                        </Col>
                                        <Col span={5}>
                                            <Input size="large" placeholder="请输入其他饮食偏好"/>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={3} className="text-r">
                                            <div className="ant-form-item-label">
                                                <label><span className="span-left">宠物情况</span></label>
                                            </div>
                                        </Col>
                                        <Col span={21}>
                                            <CheckBox data={data_pet}></CheckBox>
                                        </Col>
                                    </Row>
                                    <Row gutter={16}>
                                        <Col span={3} className="text-r">
                                            <div className="ant-form-item-label">
                                                <label><span className="span-left">其他信息</span></label>
                                            </div>
                                        </Col>
                                        <Col span={12}>
                                            <div className="ant-form-item-control">
                                                <div className="textarea-surplus">
                                                    <Input type="textarea" rows={6} placeholder="请输入其他 客户和订单相关备注信息"/>
                                                    <p>还可以输入140字</p>
                                                </div>
                                            </div>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                        </div>
                        {/*相册*/}
                        <div className="slip-cont">
                            <div className="slip-cont-title">
                                <span className="span-bdw">相册</span>
                            </div>
                            <div className="slip-cont-b">
                                <div className="add-cont">
                                    <Row gutter={16}>
                                        <Col span={3} className="text-r">
                                            <div className="ant-form-item-label">
                                                <label><span className="span-left">客户生活照</span></label>
                                            </div>
                                        </Col>
                                        <Col span={21}>
                                            <div className="ant-form-item-control">
                                                <div className="clearfix">
                                                    <Upload
                                                        action=""
                                                        listType="picture-card"
                                                        fileList={fileList}
                                                        onPreview={this.handlePreview}
                                                        onChange={this.handleChange}
                                                    >
                                                        {fileList.length >= 4 ? null : uploadButton}
                                                    </Upload>
                                                    <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                                                        <img alt="example" style={{ width: '100%' }} src={previewImage} />
                                                    </Modal>
                                                </div>
                                            </div>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                        </div>
                        {/*评价*/}
                        <div className="slip-cont">
                            <div className="slip-cont-title">
                                <span className="span-bdw">评价</span>
                            </div>
                            <div className="slip-cont-b">
                                <div className="add-cont">
                                    <Row gutter={16}>
                                        <Col span={3} className="text-r">
                                            <div className="ant-form-item-label">
                                                <label><span className="span-left">评价</span></label>
                                            </div>
                                        </Col>
                                        <Col span={12}>
                                            <div className="ant-form-item-control">
                                                <div className="textarea-surplus">
                                                    <Input type="textarea" rows={6} placeholder="请输入评价"/>
                                                    <p>还可以输入140字</p>
                                                </div>
                                            </div>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                        </div>
                        {/*活动内容*/}
                        <div className="slip-cont">
                            <div className="slip-cont-title">
                                <span className="span-bdw">活动内容</span>
                            </div>
                            <div className="slip-cont-b">
                                <div className="add-cont">
                                    <Row gutter={16}>
                                        <Col span={3} className="text-r">
                                            <div className="ant-form-item-label">
                                                <label><span className="span-left">活动内容</span></label>
                                            </div>
                                        </Col>
                                        <Col span={21}>
                                            <div className="ant-form-item-control">
                                                <div className="activity-cont">

                                                </div>
                                            </div>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="slip-footer">
                        <div className="slip-foot-center" id="slipFootCenter">
                            <Button type="primary" htmlType="submit">保存</Button>
                        </div>
                    </div>
                </div>
        )
    }
}